<template>
  <div class="home-wrapper">
    <Header></Header>
    <Main></Main>
    <a-drawer
      class="drawer-cloumn"
      :width="drawerWidth"
      placement="left"
      :closable="false"
      :mask="false"
      :visible="chartPanelStatus"
      :after-visible-change="afterVisibleChange"
      @close="onClose">
      <TrendChart :options="chartsData0"></TrendChart>
      <TrendChart :options="chartsData1"></TrendChart>
      <TrendChart :options="chartsData2"></TrendChart>
    </a-drawer>
    <a-drawer
      class="drawer-cloumn"
      :width="drawerWidth"
      placement="right"
      :closable="false"
      :mask="false"
      :visible="chartPanelStatus"
      :after-visible-change="afterVisibleChange"
      @close="onClose">
      <TrendChart :options="chartsData3"></TrendChart>
      <TrendChart :options="chartsData4"></TrendChart>
      <TrendChart :options="chartsData5"></TrendChart>
    </a-drawer>

    <Tools :right0="!chartPanelStatus"></Tools>
  </div>
</template>

<script>
import Header from '@/layout/header/Header'
import Main from '@/layout/main/Main'
import TrendChart from '@/components/TrendChart'
import Tools from '@/components/Tools'

import { getDataChart } from '@/api/huangbao.js'
import { mapGetters } from 'vuex'

var houTai = {
  "chartList": [
      {
          "datax": [
              "2021-01-22 15:30:04", 
              "2021-01-22 15:40:05", 
              "2021-01-22 15:50:04", 
              "2021-01-22 16:00:04", 
              "2021-01-22 16:10:04", 
              "2021-01-22 16:20:04"
          ], 
          "unit": "mg/m3", 
          "field": "烟尘", 
          "data": [
              0.778, 
              0.750, 
              0.699, 
              0.735, 
              0.759, 
              0.744
          ], 
          "title": "炼铁厂5#高炉1#汽车受料槽除尘出口"
      }, 
      {
          "datax": [
              "2021-01-22 15:30:04", 
              "2021-01-22 15:40:04", 
              "2021-01-22 15:50:04", 
              "2021-01-22 16:00:04", 
              "2021-01-22 16:10:04", 
              "2021-01-22 16:20:04"
          ], 
          "unit": "mg/m3", 
          "field": "烟尘", 
          "data": [
              "3.530", 
              "3.490", 
              "3.530", 
              "3.490", 
              "3.500", 
              "3.520"
          ], 
          "title": "炼铁厂1#2#汽车受料槽除尘出口"
      }, 
      {
          "datax": [
              "2021-01-22 15:30:04", 
              "2021-01-22 15:40:04", 
              "2021-01-22 15:50:04", 
              "2021-01-22 16:00:04", 
              "2021-01-22 16:10:04", 
              "2021-01-22 16:20:04"
          ], 
          "unit": "mg/m3", 
          "field": "烟尘", 
          "data": [
              "1.960", 
              "1.980", 
              "1.970", 
              "1.960", 
              "1.970", 
              "1.950"
          ], 
          "title": "炼铁厂450㎡烧结成品除尘出口"
      }, 
      {
          "fieldn": "NOx", 
          "datax": [
              "2021-01-22 15:30:00", 
              "2021-01-22 15:40:00", 
              "2021-01-22 15:50:00", 
              "2021-01-22 16:00:00", 
              "2021-01-22 16:10:00", 
              "2021-01-22 16:20:00"
          ], 
          "unit": "mg/m3", 
          "field": "烟尘", 
          "data": [
              "0.778", 
              "0.750", 
              "0.699", 
              "0.735", 
              "0.759", 
              "0.744"
          ], 
          "dataS": [
              "6.092", 
              "9.382", 
              "13.770", 
              "14.308", 
              "4.474", 
              "35.445"
          ], 
          "dataN": [
              "50.028", 
              "34.898", 
              "21.772", 
              "27.507", 
              "48.839", 
              "38.848"
          ], 
          "title": "400烧结烟气脱硫出口", 
          "fields": "SO2"
      }
  ]
}

export default {
  name: 'Home',
  data () {
    return {
      drawerWidth: 500,
      chartsData0: {},
      chartsData1: {},
      chartsData2: {},
      chartsData3: {},
      chartsData4: {},
      chartsData5: {}
    }
  },
  computed: {
    ...mapGetters(['chartPanelStatus'])
  },
  components: {
    Header,
    Main,
    TrendChart,
    Tools
  },
  methods: {
    afterVisibleChange (val) {
    },
    onClose () {
    },
    covertData (obj) {
      let chartObj = {
        data: [],
        config: {},
        titleInfo: {}
      }
      obj.datax.forEach((item, index) => {
        chartObj.data.push({
          x: item,
          y: obj.data[index]
        })
        chartObj.config = {
          x: 'x',
          y: 'y',
          drawColor: '#B34419'
        }
        chartObj.titleInfo = {
          title: obj.title.slice(0, 3),
          subTitle: obj.title,
          unit: obj.unit,
          time: '2021-01-11 10:30:00'
        }
      })
      return chartObj
    },
    getChartDataAndShow () {
      getDataChart({
        type : 'all',
        name : '',
        name1 : ''
      }).then(res => {
        // 请求成功，拿到响应数据，处理成图表需要的格式，赋值给图表
        this.chartsData0 = this.covertData(houTai.chartList[0])
        this.chartsData1 = this.covertData(houTai.chartList[0])
        this.chartsData2 = this.covertData(houTai.chartList[0])
        this.chartsData3 = this.covertData(houTai.chartList[0])
        this.chartsData4 = this.covertData(houTai.chartList[0])
        this.chartsData5 = this.covertData(houTai.chartList[0])
        console.log(res)
      })
    }
  },
  mounted () {
    this.drawerWidth = window.innerWidth * 0.25
    window.addEventListener('resize', () => {
      this.drawerWidth = window.innerWidth * 0.25
    })
    this.getChartDataAndShow()
    // setInterval(this.getChartDataAndShow, 2000)
  }
}
</script>

<style lang="less" scoped>
.home-wrapper {
  width: 100%;
  height: 100%;
  background-color: #e3e3e3;
}
</style>
